<template>
  <el-dialog
    title="详情"
    append-to-body
    destroy-on-close
    :close-on-click-modal="false"
    @close="closeDialog()"
    v-model="visible">
    <el-form :model="dataForm" ref="dataForm" label-width="80px" label-suffix=":">
      <el-form-item label="用户名" prop="userName">{{ dataForm.userName }}</el-form-item>
      <el-form-item label="用户电话" prop="userPhone">{{ dataForm.userPhone }}</el-form-item>
      <el-form-item label="车牌号" prop="carNumber">{{ dataForm.carNumber }}</el-form-item>
      <el-form-item label="行驶里程" prop="travelMile">{{ dataForm.travelMile }} m</el-form-item>
      <el-form-item label="加油金额" prop="amount">{{ dataForm.amount }} 元</el-form-item>
      <el-form-item label="加油站" prop="stationName">{{ dataForm.stationName }} <el-icon> <Location /> </el-icon></el-form-item>
      <el-form-item label="现场照片" prop="siteImage">
          <el-image 
            style="width: 200px; height: 150px" 
            :src="dataForm.siteImage" 
            :zoom-rate="1.2"
            :preview-src-list="siteImageList"
            :initial-index="0"
            fit="cover" />
      </el-form-item>
      <el-form-item label="收据照片" prop="receiptImage">
          <el-image 
            style="width: 200px; height: 150px" 
            :src="dataForm.receiptImage" 
            :zoom-rate="1.2"
            :preview-src-list="receiptImageList"
            :initial-index="0"
            fit="cover" />
      </el-form-item>
      <el-form-item label="创建人" prop="createBy">{{ dataForm.createBy }}</el-form-item>
      <el-form-item label="更新人" prop="updateBy">{{ dataForm.updateBy }}</el-form-item>
      <el-form-item label="创建时间" prop="createTime">{{ dataForm.createTime }}</el-form-item>
      <el-form-item label="更新时间" prop="updateTime">{{ dataForm.updateTime }}</el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
    import {getObj} from '@/api/smart/oilrecord'
    export default {
      data () {
        return {
          visible: false,
          siteImageList:[],
          receiptImageList:[],
          dataForm: {
            id: '',
            userId: '',
            userName: '',
            carNumber: '',
            travelMile: '',
            amount: '',
            stationName: '',
            address: '',
            longitude: '',
            latitude: '',
            siteImage: '',
            receiptImage: '',
            createBy: '',
            updateBy: '',
            createTime: '',
            updateTime: '',
          }
        }
      },
      methods: {
        init (id) {
          this.visible = true;
          this.$nextTick(() => {
            this.dataForm = {};
              if (id) {
                getObj(id).then(response => {
                  this.dataForm = response.data.data
                  this.siteImageList.push(this.dataForm.siteImage)
                  this.receiptImageList.push(this.dataForm.receiptImage)
              })
            }
          })
        },
        //重置表单
        closeDialog() {
            this.$refs["dataForm"].resetFields()
        }
      }
  }
</script>
